<template>
  <div class="take-photo">
    <div class="box">
      <h2>说明：</h2>
      <h4>请扶正手机，摘下帽子、口罩、有色眼镜等遮罩物，露出额头、到光线明亮处点击头像开始检测</h4>
    </div>
    <UploadFace @next='myNext' class="image-button"></UploadFace>
    <el-button type="primary" class="next" @click="handleSave">下一步</el-button>
  </div>
</template>

<script>
import router from '../router'
import UploadFace from './upload/UploadFace'

export default {
  name: 'TakePhoto',
  data () {
    return {}
  },
  methods: {
    //需要判断
    handleSave () {
      if (this.className === 'log') {
        var params = this.$route.query
        this.$store.commit('title', '车辆信息')
        router.push({path: '/collect', query: params})
      } else{
        this.$message.error('请点击头像，进行身份校验！')
      }

    },
    myNext (name) {
      this.className = name
    }
  },
  components: {
    UploadFace,
  },
  mounted () {
    this.$store.commit('title', '远程身份校验')
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  .take-photo {
    margin-top: 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .image-button {
    padding: 20px;
  }

  .next {
    min-width: 200px;
  }
</style>
